<template>
  <div class="analysis-table">
    <!-- <div class="name">
      <span>交叉(卡方)</span>
      <span>
        <el-select v-model="chiSquareValue" style="width: 200px">
          <el-option label="数字(占比)" value="1" />
          <el-option label="数字" value="2" />
          <el-option label="百分比" value="3" />
        </el-select>
      </span>
    </div> -->
    <div class="chart-item">
      <table style="width: 100%" v-if="currentData" id="score">
        <thead>
          <tr>
            <th :colspan="currentData.titles.length + 1">关联系数结果</th>
          </tr>
          <tr>
            <th rowspan="1" colspan="1">项</th>
            <th rowspan="1" colspan="1" v-for="(item, index) in currentData.titles" :key="index">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in currentData.resultData" :key="index">
            <td>第{{ index + 1 }}项</td>
            <td v-for="i in item.length" :key="i">{{ item[i - 1].toFixed(3) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="describe" v-if="currentData.analyse1">
      <div v-if="currentData.analyse1">
        <div class="title">分析建议</div>
        <div v-html="currentData.analyse1"></div>
      </div>
    </div>
    <div class="chart-item">
      <div class="title">
        关联系数
        <div class="tools"></div>
      </div>
      <div class="chart">
        <LineChart :chartOption="currentData.correlationOption" />
      </div>
    </div>
    <div class="chart-item">
      <div class="title">
        关联度结果
        <div class="tools"></div>
      </div>
      <table style="width: 100%" v-if="currentData">
        <thead>
          <tr>
            <th colspan="3">关联度结果</th>
          </tr>
          <tr>
            <th rowspan="1" colspan="1">评价项</th>
            <th rowspan="1" colspan="1">关联度</th>
            <th rowspan="1" colspan="1">排名</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in currentData.titles" :key="index">
            <td>{{ item }}</td>
            <td>{{ currentData.results[index].toFixed(3) }}</td>
            <td>{{ currentData.resultOrders[index] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="chart-item">
      <div class="title">
        关联度
        <div class="tools"></div>
      </div>
      <div class="chart">
        <LineChart :chartOption="currentData.correlationOption2" />
      </div>
    </div>
    <div class="chart-item">
      <div class="title">
        样本缺失情况汇总
        <div class="tools"></div>
      </div>
      <table style="width: 100%" v-if="currentData">
        <thead>
          <tr>
            <th colspan="3">样本缺失情况汇总</th>
          </tr>
          <tr>
            <th rowspan="1" colspan="1">项</th>
            <th rowspan="1" colspan="1">样本数</th>
            <th rowspan="1" colspan="1">占比</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>有效样本</td>
            <td>{{ currentData.dataCnt }}</td>
            <td>{{ ((currentData.dataCnt / currentData.originCount) * 100).toFixed(2) }} %</td>
          </tr>
          <tr>
            <td>排除无效样本</td>
            <td>{{ currentData.originCount - currentData.dataCnt }}</td>
            <td>
              {{ (((currentData.originCount - currentData.dataCnt) / currentData.originCount) * 100).toFixed(2) }}%
            </td>
          </tr>
          <tr>
            <td>总计</td>
            <td>{{ currentData.originCount }}</td>
            <td>{{ ((currentData.originCount / currentData.originCount) * 100).toFixed(2) }}%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue-demi'
import LineChart from '../LineChart.vue'
import { chartOption } from '../chart'
const chiSquareValue = ref('1')
const tableData = ref([])
const selectValue = ref('1')
const prop = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const currentData = ref('')
onMounted(() => {
  console.log(prop.data)
  setData()
})
const setData = () => {
  const data = JSON.parse(JSON.stringify(prop.data))
  const params = {
    xData: data.resultData.map((i, index) => `第${index + 1}项`),
    data: data.titles.map((i, j) => {
      return {
        name: i,
        data: data.resultData.map((item) => item[j].toFixed(2))
      }
    })
  }
  const dataList = []
  data.resultData.forEach((item) => {
    item.forEach((i) => {
      dataList.push(i)
    })
  })
  currentData.value = data
  currentData.value.correlationOption = chartOption(params, '关联系数', 'baseLine', {
    min: getMinNum(dataList)
  })
  const params2 = {
    xData: data.titles,
    data: [
      {
        data: data.results.map((item) => item.toFixed(2))
      }
    ]
  }
  console.log(params2)

  currentData.value.correlationOption2 = chartOption(params2, '关联度', 'baseBar')
}
const getMinNum = (arr) => {
  if (arr.length == 0) {
    return ''
  }
  const min = Math.min.apply(null, arr)
  const max = Math.max.apply(null, arr)
  if (max / min > 1000) {
    return ''
  } else {
    if (Math.abs(min) < 1) {
      return Math.floor(min * 10) / 10
    } else {
      return Math.floor(min)
    }
  }
}
</script>

<style lang="scss" scoped>
.name {
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.entropyChange {
  margin-left: 10px;
  border: 1px solid #000;
  cursor: pointer;
}
.chart-item {
  // border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin: 20px 0 40px 0;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
  border-radius: 5px;
}
.chart {
  width: 100%;
  height: 400px;
}
.title {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  .tools {
    display: flex;
  }
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 25px;
    height: 20px;
    width: 5px;
    background-color: #178aec;
  }
}
#describe {
  margin: 20px 0 40px 0;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
  border-radius: 5px;
  padding-bottom: 20px;
}
</style>
<style lang="scss">
.analysis-table {
  table {
    /* width: 100%; */
    /* border: 1px solid #DDDDDD; */
    /* width: 1137px; */
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  table tr {
    width: 100%;
    /* line-height: 35px; */
    height: 27px;
    /* height: 35px; */
    text-align: center;
  }

  table tr th {
    /* background: #fafafa; */
    color: #000;
    font-weight: 400;
    /* border: 1px solid #DDDDDD; */
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid;
  }

  table tr td {
    color: #000;
    /* border: 1px solid #DDDDDD; */
    /* border-bottom: 2px solid; */
  }
}
</style>
